<template>
  <ContentWrap title="审批单详情">
    <el-descriptions :column="1" class="w-full" border>
      <el-descriptions-item label="审核状态">
        {{ statusMap[detailInfo.status] }}
      </el-descriptions-item>
      <el-descriptions-item label="业务名称">
        {{ detailInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label="业务类型">
        {{ detailInfo.type == 1 ? 'VOS点呼/群呼主叫加白' : '双向回拨号码加白' }}
      </el-descriptions-item>
      <el-descriptions-item label="归属地">
        {{ detailInfo.locationName }}
      </el-descriptions-item>

      <el-descriptions-item label="话术内容">
        {{ detailInfo.speechContent }}
      </el-descriptions-item>

      <el-descriptions-item label="加白坐席">
        <el-table :data="detailInfo.agentList" :stripe="true" border :show-overflow-tooltip="true">
          <el-table-column label="坐席工号" align="center" prop="agentNumber" />
          <el-table-column label="双呼主叫手机号" align="center" prop="telephone" width="150" />
          <el-table-column label="真实姓名" align="center" prop="realName">
            <template #default="scope">
              <div :class="scope.row.realName ? '' : 'text-red text-12px'">
                {{ scope.row.realName ?? '请补全姓名' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="身份证号" align="center" prop="idNumber" width="180">
            <template #default="scope">
              <div :class="scope.row.idNumber ? '' : 'text-red text-12px'">
                {{ scope.row.idNumber ?? '请补全身份证' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="点呼主叫加白" align="center" prop="sipCallAuditStatus">
            <template #default="scope">
              <el-tag
                v-if="auditStatusMap[scope.row.sipCallAuditStatus]"
                :type="auditStatusMap[scope.row.sipCallAuditStatus].type"
                >{{ auditStatusMap[scope.row.sipCallAuditStatus].text }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="双向回拨加白" align="center" prop="doubleCallAuditStatus">
            <template #default="scope">
              <el-tag
                v-if="auditStatusMap[scope.row.doubleCallAuditStatus]"
                :type="auditStatusMap[scope.row.doubleCallAuditStatus].type"
                >{{ auditStatusMap[scope.row.doubleCallAuditStatus].text }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="ownerUsername" />

          <el-table-column label="状态" align="center" prop="status">
            <template #default="scope">
              <el-tag type="info" v-if="scope.row.status == 0">未启用</el-tag>
              <el-tag type="success" v-if="scope.row.status == 1">已启用</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 9">已过期</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核结果" align="center" prop="auditResult"> </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            :formatter="dateFormatter"
            width="180px"
          />
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
</template>

<script setup>
import * as WhiteAuditApi from '@/api/call/whiteaudit'
import { dateFormatter } from '@/utils/formatTime'

// 审批单详情
const detailInfo = ref({})
const getAuditDetail = async (id) => {
  detailInfo.value = await WhiteAuditApi.getWhiteAudit(id)
}
// 枚举
const statusMap = { 0: '待审批', 1: '审批结束' }

// 操作栏
const { replace } = useRouter()
const { params } = useRoute()
const returnBack = () => {
  replace({ path: '/call/white-audit' })
}

const auditStatusMap = {
  0: { type: 'info', text: '待审批' },
  1: { type: 'success', text: '已加白' },
  2: { type: 'danger', text: '不通过' }
}
onMounted(() => {
  if (params.id) {
    getAuditDetail(params.id)
  } else {
    returnBack()
  }
})
</script>
